<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>screen_saver</title>
		<style>
			body {
				background: url(img/6597372132355616203.jpg) no-repeat;
				background-size: cover;
			}
			
			div {
				width: 222px;
				height: 222px;
				position: absolute;
			}
			
			img {
				position: absolute;
			}
		</style>
	</head>

	<body>
	</body>
	<script>
		//创建气泡
		var num = 0;
		id = setInterval(function() {
			var divs = document.createElement("div");
			divs.setAttribute("x", (Math.random() * 15) + 5);
			divs.setAttribute("y", (Math.random() * 15) + 5);
			divs.style.top = "0px";
			divs.style.left = "0px";
			document.body.appendChild(divs);
			for(var k = 0; k < 4; k++) {
				var imgs = document.createElement("img");
				imgs.src = "img/ch" + k + ".png";
				divs.appendChild(imgs)
			}
			num++;
			if(num == 5) {
				clearInterval(id);
			}
		}, 1000)

		//移动气泡
		function moveBall() {
			var divs = document.getElementsByTagName("div");
			var width = document.documentElement.clientWidth;
			var height = document.documentElement.clientHeight;
			for(var i = 0; i < divs.length; i++) {
				var imgtop = parseInt(divs[i].style.top);
				var imgleft = parseInt(divs[i].style.left);
				var x = parseInt(divs[i].getAttribute("x"));
				var y = parseInt(divs[i].getAttribute("y"));
				imgtop += y;
				imgleft += x;
				divs[i].style.top = imgtop + "px";
				divs[i].style.left = imgleft + "px";
				if(imgtop >= height - 222) {
					y = -y;
					changeOpacity(divs[i]);
					divs[i].style.top = (height - 222) + "px";
				}
				if(imgleft >= width - 222) {
					x = -x;
					changeOpacity(divs[i]);
					divs[i].style.left = (width - 222) + "px";
				}
				if(imgtop <= 0) {
					y = -y;
					changeOpacity(divs[i]);
					divs[i].style.top = "0px";

				}
				if(imgleft <= 0) {
					x = -x;
					changeOpacity(divs[i]);
					divs[i].style.left = "0px";
				}
				divs[i].setAttribute("x", x);
				divs[i].setAttribute("y", y);
			}
		}

		//改变颜色
		function changeOpacity(div) {
			imgs = div.getElementsByTagName("img");
			for(var i = 0; i < imgs.length - 1; i++) {
				imgs[i].style.opacity = Math.random();
			}
		}

		setInterval(function() {
			moveBall();
		}, 100)
	</script>

</html>